<template>
  <el-dialog :fullscreen="dialogFull" :title="flowchart.title" :visible.sync="flowchart.open" @close="closeDialog" width="60%">
    <template slot="title">
      <div class="avue-crud__dialog__header">
        <div slot="header" class="clearfix">
          <span class="el-dialog__title">
            <span class="el-icon-picture-outline">流程图</span>
          </span>
        </div>
        <div class="avue-crud__dialog__menu" @click="dialogFull? dialogFull=false: dialogFull=true">
          <i :class="dialogFull? 'el-icon-aim':'el-icon-full-screen'" ></i>
        </div>
      </div>
    </template>
    <flow-view :xmlData="xmlData" :taskList="taskData" :dialogFull="dialogFull"/>
  </el-dialog>
</template>
<script>
import bpmnModeler from '@whflow/components/Process/index'
import FlowView from './flowview'

export default {
  name: 'Flow',
  components: {
    bpmnModeler,
    FlowView
  },
  props: {
    xmlData: {
      type: String,
      default: ''
    },
    taskData: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: ''
    },
    open: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogFull: false,
      flowchart: {
        open: false,
        title: ''
      },
    }
  },
  watch: {
    open: function (val) {
      this.flowchart.open = val
    }
  },
  methods: {
    closeDialog () {
      this.$emit('closeChildDialog')
    }
  }
}
</script>
<style lang="scss">
  /*  dialog*/
  .el-dialog__header {
    padding: 15px 20px 15px;
  }
  .el-dialog__headerbtn{
    top: 14px;
  }

  /*dialog header*/
  .el-dialog__header{
    background: #e3eaed;
  }
  .avue-crud__dialog__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .el-dialog__title {
    color: rgba(0,0,0,.85);
    font-weight: 600;
    word-wrap: break-word;
  }
  .avue-crud__dialog__menu {
    padding-right: 20px;
    float: left;
  }
  .avue-crud__dialog__menu i {
    color: #909399;
    font-size: 16px;
  }
  .el-icon-full-screen{
    cursor: pointer;
  }
  .el-icon-full-screen:before {
    content: "\e719";
  }
</style>